/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<view class="container">
			<view class="search-bar">
				<input @input="inputSearch" v-model="searchData" placeholder="请输入关键字..." placeholder-class="place">

				</input>
				
				<closeicon @click="searchGoods" size="20" type="search" role="img"></closeicon>
			</view>
			<view class="nav">
				<navigator @tap="changeTab" class="nav-item" :data-href="requestData.orderby_default"role="navigation">
					综合
					<view class="ico-dg">
						<image class="wh100" :src="imgUrl+'index/dg.png'" role="img"></image>
					</view>
				</navigator>
				<navigator @tap="changeTab" class="nav-item":data-href="requestData.orderby_sales_sum" role="navigation">销量</navigator>
				<navigator @tap="changeTab" :data-price="1" class="nav-item" :data-href="requestData.orderby_price"role="navigation">
					价格
					<view class="ico-dir" :class="[priceScreening?'':(!ascending?'ico-dir-up':'ico-dir-dn')]" :style="'background-image:url('+szjxImg+')'">
						
					</view>
				</navigator>
			</view>
			<view class="choice_list">
				<block v-for="(item,index) in storeList">
					<navigator class="choice_item" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id='+item.goods_id" role="navigation">
						<view class="img-wrap">
							<image :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ item.goods_id+'&width='+goodsImgWidth+'&height='+goodsImgHeight+'&'+item.goods_id+'.'+imgType" role="img"></image>
						</view>
						<view class="item-cont">
							<view class="title">{{item.goods_name}}</view>
							<view class="price">￥{{item.shop_price.toFixed(2)}}</view>
							<view class="comment">评论{{item.comment_count}} 销量{{item.show_sale_sum}}</view>
						</view>
					</navigator>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import {getStoreGoods,getGoodsFilter} from "@/api/api.js";
	import config from "@/api/config.js";
	import closeicon from "@/components/uni-icons/uni-icons.vue";
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				hostUrl: config.host,
				imgUrl:config.imgUrl,
				total:0,//条数
				size:10,//数据大小
				requestData:"",//筛选请求的数据
				
				searchData:"",//搜索数据
				storeId:"",//店铺id
				is_new:"",//新品1
				is_hot:"",//热销
				storeList:"",//商品
				options:"",
				priceScreening:true, //价格筛选
				ascending:true, //升序
				szjxImg:'common/sxjt.png',
				flag:true,
				params:{
					"store_id":"",
					"is_new":"",//新品
					"is_hot":"",//热门
				}
			};
		},
		computed: {
			...mapState(['imgType','goodsImgHeight','goodsImgWidth'])
		},
		onLoad(options){
			console.log(options)
			this.options=options;
			// let is_new=options.is_new;
			// let is_hot=options.is_hot;
			// console.log(is_new)
			let store_id=options.store_id;
			
			
			this.storeId=options.store_id;
			this.params.store_id=this.storeId
			// if(this.storeId){
			// 	let params={
			// 		"store_id":this.storeId,
					
			// 		"size":this.size,
			// 	}
				
			// 	this._getStoreGoods(params)
			// }else 
			if(this.options.mode=="is_new"){
				
				this.params.is_new=1
				this._getStoreGoods(this.params)
				return
				
			}
			if(this.options.mode=="is_hot"){
				this.params.is_hot=1
				this._getStoreGoods(this.params)
				return 
				
			}
			
		},
		components:{closeicon},
		methods:{
			_getStoreGoods(params){
				getStoreGoods(params).then(res=>{
					console.log(res)
					// console.log(params.is_new,params.store_id)
					this.storeList=res.records
					this.total=res.total;
					if(this.options.mode=="is_new"){
						var request=`store_id=${params.store_id}&is_new=${params.is_new}`;
						console.log(request)
						this._getGoodsFilter(request);
					}else if(this.options.mode=="is_hot"){
						var request=`store_id=${params.store_id}&is_hot=${params.is_hot}`;
						console.log(request)
						this._getGoodsFilter(request);
					}
					
					
				})
			},
			/*筛选属性*/
			_getGoodsFilter(url){
				getGoodsFilter(url).then(res=>{
					// console.log(url)
					console.log(res)
					
					if(this.flag){
						for(let key in res){
						  
						   if(this.options.mode=="is_new"){
								res[key]=res[key]+"&is_new=1";
								
						   }
						   if(this.options.mode=="is_hot"){
							   res[key]=res[key]+"&is_hot=1";
							  
						   }
						  
						}
						this.flag=false;
					}
					
				
					console.log(res)
					this.requestData=res;
					// this.filterAttr=res.filter_attr;
					// this.filterBrand=res.filter_brand;
					// this.filterPrice=res.filter_price;
				})
			},
			request(e){
				var that=this;
				uni.request({
				 url:that.hostUrl +'/mall/goods/page?'+ e,
				 // data,
				
				 header:{
				     'content-type': 'application/json' // 默认值
				 },
				
				 success:function(res){
					
				   console.log(res)
				   var request1=e.replace(/&/g,"%26");
				   that._getGoodsFilter(request1)
					that.storeList=res.data.records;
				    
				 },
				 fail:function(res){
				   
				 },
				 complete:function(){
				    
				 }
				 })
			},
			inputSearch(){
				console.log(this.searchData)
				let params={
					goods_name:this.searchData
				}
				this._getStoreGoods(params)
				
			},
			changeTab(e){
				var hrefData=e.currentTarget.dataset.href.split("&")
				var price=e.currentTarget.dataset.price
				
				if(price){
					hrefData.forEach((i,index)=>{
						if(i=="order_by=shop_price"){
							this.priceScreening=false
							if(i=="sort=desc"){
								this.ascending=true
							}
								this.ascending=!this.ascending
						}
					})
				}else{
					this.priceScreening=true
					this.ascending=false
				}
				
				this.request(e.currentTarget.dataset.href)
			},
			onReachBottom(){//下拉加载数据
				console.log("滚动加载")
				if(this.storeList.length===this.total){
					uni.showToast({
						icon:"none",
					    title: '加载完了',
					    duration: 2000
					});
					 return false;
				}
				this.size+=9;
				let params={
					"store_id":this.storeId,//店铺id
					"size":this.size,
					"is_new":this.is_new,//新品 1
				}
				this._getStoreGoods(params)
				
			},
		}
	}
</script>

<style lang="scss">
	.container {
		color: #666;
	}

	.search-bar {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: #fff;
		font-size: 28rpx;
		margin: 10rpx 15rpx;
		border-radius: 10rpx;
		height: 56rpx;
	}
	.place{
		font-size: 24rpx;
	}
	.search-bar>input {
		padding-left: 30rpx;
		width: 100%;
		margin-top: 8rpx;
	}

	.search-bar>.uni-icons {
		padding: 0 30rpx;
		padding-top: 4rpx;
		
	}

	.nav-item {
		float: left;
		width: 33.333333%;
		height: 90rpx;
		line-height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		border-bottom: 1px solid #f3f3f3;
		background-color: #fff;
	}

	.nav-item .ico-dg {
		width: 18rpx;
		height: 12rpx;
		margin-left: 10rpx;
		line-height: 0;
	}

	.nav-item .ico-filter {
		width: 20rpx;
		height: 20rpx;
		margin-left: 10rpx;
		line-height: 0;
	}

	.ico-dir {
		width: 16rpx;
		height: 22rpx;
		margin-left: 10rpx;
		background-repeat: no-repeat;
		background-size: cover;
		background-position-x: 0;
	}

	.ico-dir-dn {
		background-position-x: -16rpx;
	}

	.ico-dir-up {
		background-position-x: -32rpx;
	}

	.choice_list {
		background-color: #fff;
	}

	.choice_item {
		position: relative;
		width: 100%;
		min-height: 200rpx;
		padding: 10rpx 0;
		border-bottom: 1px solid #f3f3f3;
		font-size: 28rpx;
	}

	.img-wrap {
		float: left;
		width: 180rpx;
		height: 180rpx;
		padding: 0 10rpx 10rpx;
	}

	.img-wrap image {
		width: 100%;
		height: 100%;
	}

	.item-cont .title {
		height: 72rpx;
		margin: 16rpx 0;
		padding-right: 10rpx;
		line-height: 36rpx;
		color: #333;
		overflow: hidden;
	}

	.price {
		display: inline-block;
		color: #ff3b3b;
		padding-bottom: 20rpx;
	}

	.comment {
		font-size: 25rpx;
	}

	/* 弹框相关 */
	.filter-modal {
		position: fixed;
		left: 150rpx;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 20;
		background-color: white;
		overflow-x: hidden;
		padding-bottom: 30rpx;
	}

	.filter-box {
		box-sizing: border-box;
		width: 100%;
		font-size: 28rpx;
		padding: 20rpx;
	}

	.filter-name {
		width: 100%;
		padding: 20rpx 0;
		word-break: keep-all;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size: 30rpx;
	}

	.filter-items {
		width: 100%;
	}

	.filter-item {
		float: left;
		width: fit-content;
		max-width: 500rpx;
		word-break: keep-all;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		padding: 10rpx;
		border-radius: 10rpx;
		border: 1rpx solid #f3f3f3;
		margin: 0 10rpx 10rpx 0;
		background-color: #fdfdfd;
		color: #666;
	}

	.viewall-btn {
		margin-top: 20rpx;
		width: 300rpx;
	}
</style>
